<template>
    <!-- 频道信息栏 -->
    <div class="channel-component-container">
        <router-link class="channel-component-img" :to="{name: 'Index', params: {channelid: info.id}}" v-if="info.id">
            <img v-lazy="info.hostUserIcon + '?x-oss-process=image/resize,w_200'"/>
        </router-link>
        <div class="channel-component-info">
            <div class="channel-component-head">
                <router-link class="channel-component-title" :to="{name: 'Index', params: {channelid: info.id}}"
                             v-if="info.id">
                    {{info.name}}
                </router-link>

                <router-link class="channel-component-nav" :to="{name: 'Index', params: {channelid: info.id}}"
                             v-if="info.id">
                    <img src="../assets/images/hand-left.png"/>&nbsp;扬帆频道
                </router-link>
                <div class="clearBoth"></div>
            </div>
            <div class="channel-component-body">{{info.summary}}</div>
        </div>
        <div class="clearBoth"></div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: {}
            }
        },
        mounted: function () {
            // console.log(JSON.stringify(this.info));
        }
    }
</script>

<style>
    .channel-component-container {
        background-color: #FAFAFA;
        padding: 0.8rem 0.4rem;
        margin: 0.8rem -0.8rem;
        border-top: 0.06rem solid #E5E5E4;
        border-bottom: 0.06rem solid #E5E5E4;
    }

    .channel-component-img {
        width: 16%;
        float: left;
        margin-top: 0.35rem;
    }

    .channel-component-img img {
        display: block;
        width: 2.5rem;
        height:2.5rem;
        border-radius: 0.4rem;
        margin: auto;
        object-fit: cover;
    }

    .channel-component-info {
        width: 81%;
        float: right;
    }

    .channel-component-head {
        line-height: 2.0rem;
        padding-right: 5.3rem;
        position: relative;
    }

    .channel-component-title {
        width: 100%;
        float: left;
        color: #222222;
        font-size: 1.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        display: block;
    }

    .channel-component-label {
        width: 3.0rem;
        float: left;
        /*font-size: 0.6rem;*/
        /*line-height: 1.0rem;*/
        /*border: 0.06rem solid #9852FF;*/
        /*border-radius: 0.6rem;*/
        /*color: #9852FF;*/
        /*padding: 0 0.06rem;*/
        /*margin-top: 0.44rem;*/
    }

    .channel-component-label img {
        height: 1.4rem;
        margin-top: 0.3rem;
        display: block;
    }

    .channel-component-nav {
        color: #9852FF;
        font-size: 0.8rem;
        float: right;
        text-decoration: none;
        display: block;
        width: 5.3rem;
        position: absolute;
        right:0;
    }

    .channel-component-nav img {
        vertical-align: text-bottom;
        width: 1.3rem;
        top: 3px;
        position: relative;
    }

    .channel-component-body {
        font-size: 0.9rem;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>